<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="学科名称">
          <el-row>
            <el-col :span="6" style="width: 200px">
              <el-input
                v-model="form.name"
                size="small"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="3">
              <div class="two_whith">
                <el-button size="small" @click="delform">清空</el-button>
                <el-button type="primary" size="small" @click="xuke_search"
                  >搜索</el-button
                >
              </div>
            </el-col>
            <el-col :span="17" style="text-align: right">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="isshowdel"
                >新增学科</el-button
              ></el-col
            >
          </el-row>
        </el-form-item>
      </el-form>
      <el-alert :title="`数据一共${this.page.counts}条`" type="info" show-icon>
      </el-alert>
      <el-table :data="list" row-key="id">
        <el-table-column type="index" label="序号" />
        <el-table-column label="学科名称" prop="subjectName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" prop="addDate" />
        <el-table-column label="前台是否显示" prop="isFrontDisplay" />
        <el-table-column label="二级目录" prop="twoLevelDirectory" />

        <el-table-column label="标签" prop="totals" />
        <el-table-column label="题目数量" prop="tags" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="small"
              @click="$router.push({path:'/subjects/directorys',query:{id:row.id}})"
              >学科分类</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="$router.push({path:'/subjects/tags',query:{id:row.id}})"
              >学科标签</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="amendsubject(row.id, row.subjectName)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="delsubjectbtn(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 20px; text-align: right" align="middle">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="page.counts"
          :current-page.sync="page.page"
          :page-size.sync="page.pagesize"
          @current-change="getList"
          @size-change="getList"
        />
      </el-row>
    </el-card>
    <el-dialog
      width="400px"
      title="新增学科"
      :visible="shownewly"
      @close="btnCancel"
    >
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item label="学科名称" prop="name">
          <el-input
            v-model="roleForm.subjectName"
            placeholder="请输入学科名称"
          />
        </el-form-item>
      </el-form>
      <el-switch
        inactive-text="是否显示"
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="12">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row></el-dialog
    >
    <el-dialog
      class="modality"
      width="400px"
      title="新增学科"
      :visible="showamendy"
      @close="btnCancell"
    >
      <el-form
        ref="roleFormm"
        :model="roleFormm"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item label="学科名称" prop="name">
          <el-input
            v-model="roleFormm.name"
            placeholder="请输入学科名称"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <el-switch
        inactive-text="是否显示"
        v-model="valuee"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="12">
          <el-button size="small" @click="btnCancell">取消</el-button>
          <el-button size="small" type="primary" @click="amendOK"
            >确定</el-button
          >
        </el-col>
      </el-row></el-dialog
    >
  </div>
</template>

<script>
//  :current-page.sync="page.page"
import { list, add, detail, update, remove } from '@/api/hmmm/subjects.js'
export default {
  created () {
    this.getList()
  },
  components: {},
  data () {
    return {
      delsubject: false,
      roleFormm: {
        name: ''
      },
      onglyid: null,
      showamendy: false,
      value: true,
      roleForm: {
        subjectName: ''

      },
      rules: {
        name: [{ required: true, message: '学科名称不能为空', trigger: 'blur' }]
      },
      shownewly: false,
      currentPage3: 5,
      form: {
        name: ''
      },
      list: {},
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 每页请求多少条数据
        counts: '' // 总数
      }
    }
  },
  methods: {
    // 获取详细书类表
    async getList () {
      const res = await list(this.page)
      this.list = res.data.items
      this.list.forEach((element) => {
        element.isFrontDisplay = element.isFrontDisplay === 0 ? '否' : '是'
      })
      this.page.counts = res.data.counts
    },
    // 清空表单内容
    delform () {
      this.form = {}
    },
    async xuke_search () {
      try {
        const { data } = await list({
          subjectName: this.form.name
        })
        this.list = data.items
      } catch (erreo) {
        console.log('错误')
      }
    },
    isshowdel () {
      this.shownewly = true
    },
    btnCancel () {
      this.shownewly = false
      this.roleForm = {}
    },
    // 添加学科
    async btnOK () {
      console.log('www')
      console.log(this.roleForm.name)
      try {
        const res = await add({
          subjectName: this.roleForm.name,
          isFrontDisplay: this.value
        })
        this.$message.success('添加学科成功')
        this.btnCancel()
        this.getList()
        console.log(res)
      } catch (erreo) {
        this.$message.erreo('添加学科失败')
      }
    },
    async amendsubject (id) {
      this.onglyid = id
      this.showamendy = true
      const res = await detail({
        id: id
      })
      this.roleFormm.name = res.data.subjectName
      console.log(res)
    },
    btnCancell () {
      this.showamendy = false
    },
    // 学科修改
    async amendOK () {
      this.valuee = this.valuee ? 1 : 0
      console.log(this.onglyid)
      try {
        await update({
          id: this.onglyid,
          subjectName: this.roleFormm.name,
          isFrontDisplay: this.valuee
        })
        this.$message.success('学科修改成功')
        this.btnCancell()
        this.getList()
      } catch (error) {
        this.$message.error('修改失败')
      }
    },
    // 是删除弹出层+删除学科
    async delsubjectbtn (id) {
      // this.delsubject = true
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // this.requestSwitchStatus(row)
        })
        .catch(() => {})
      try {
        await remove({
          id: id
        })
        this.$message.success('学科删除成功')
        this.getList()
      } catch (error) {
        this.$message.error('学科删除失败')
      }
    },
    delsubjectcancel () {
      this.delsubject = false
    },
    delsubjectOk () {}
  }
}
</script>

<style>
.box-card {
}
.button_left {
  height: 36px;
}
.two_whith {
  margin-left: 13px;
  width: 200px;
}
.span_right {
  position: relative;
  top: -40px;
}
.el-alert {
  margin-top: 0px;
}
.el-table {
  margin-top: 15px;
}
.el-switch {
  margin-left: 15px;
}
.modality {
  background: #fff;
}
</style>
